<template>
    <fieldset>
        <legend>计数器</legend>
        <button @click="DECREMENT_NUM(5)">-</button>
        &nbsp;
        &nbsp;
        <b>{{num}}</b>
        &nbsp;
        &nbsp;
        <button @click="add">+</button>
        <h1>user:{{user}}</h1>

        <button @click="GET_PRODUCT(12)">点击获取购物车数据</button>
        <ul>
            <li v-for="item in products" :key="item.id">{{item.title}}</li>
        </ul>
        <h2>msg:{{$store.getters.reverseMsg}}</h2>
        <h2>msg:{{reverseMsg}}</h2>
    </fieldset>
</template>
<script>
    // 如何使用vuex定义的state
    // 1.使用store直接获取
    // 2.辅助函数mapState

    // 调用mutations中的方法
    // 1.通过commit提交
    // 2.通过辅助函数mapMutations调用

    // 调用action的方法
    // 1.通过dispatch进行调用
    // 2.辅助函数mapActions

    // 使用getters
    // 1.直接使用 $store.getters.xxx
    // 2.辅助函数mapGetters

    import { mapState,mapMutations,mapActions, mapGetters, } from "vuex"

    export default {
        // 将状态映射到计算属性中（规律：结果放在计算属性中，函数放在methods）

        computed:{
            ...mapState(["num","user","products","msg"]),
            ...mapGetters(["reverseMsg"])
        },
        mounted(){
            console.log(this.$store.state.num);
        },
        methods:{
            ...mapMutations(["DECREMENT_NUM"]),
            add(){
                this.$store.commit("INCREMENT_NUM",10)
            },
            // getCart(){
            //     this.$store.dispatch("GET_PRODUCT",20)
            // }
            ...mapActions(["GET_PRODUCT"])
        }
    }
</script>